<template>
<el-container>
<el-header>
    <div class="searchBtn">
  <el-input placeholder="搜索内容关键词" v-model="keyword"></el-input>
  <el-input placeholder="最小视频长度" v-model="maxTimes"></el-input>
  <el-input placeholder="最大视频长度" v-model="minTimes"></el-input>
  <el-button @click="conditionSerch">搜索</el-button>
  <el-button type="primary" @click="updateLibraryFlag = true">上传作品</el-button>
  <el-button type="danger">批量删除</el-button>
  <el-dialog :title='上传作品' :visible.sync="updateLibraryFlag" center>
    <el-form ref="uploadList" :model="uploadList">
        <el-form-item label="选择分组 :">
        <template>
            <el-select v-model="groupName" placeholder="请选择">
                <el-option v-for="(item,index) in libraryList" :key="index" :label="item.label" :value="item.groupName"></el-option>
            </el-select>
        </template>
        </el-form-item>
        <el-form-item label="选择本地视频文件 :">
            <el-button type="primary" style="position:relative">选择本地视频文件
                <input ref="uploadRef" id="uploadfile" type="file" @change="uploadfile" />
            </el-button>
        </el-form-item>
        <el-form-item :label="'视频时长 : '+ uploadList.times+'s'"></el-form-item>
        <el-form-item label="作品内容 :">
            <el-input type="textarea" v-model="uploadList.text" id="textheight"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="updateLibraryFlag = false">取 消</el-button>
        <el-button type="primary" @click="updateNew">确 定</el-button>
    </span>
</el-dialog>
</div>
</el-header>
  <el-container>
    <el-aside width="200px" class="leftTab">
      <p class="group">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </p>
      <p v-for="(item,index) in leftAside" :key="index" class="subGroup">
        <el-checkbox-group v-model="checkedLibrary" @change="handleCheckedCitiesChange">
          <el-checkbox :label="item" >{{ item.name }} ({{ item.videoCounts }})</el-checkbox>
          <!-- 删除设备分组 -->
          <el-button v-if="item.id != 0 ? true : false " type="danger" class="deleteButton" icon="el-icon-delete" circle @click="deleteId(item.id)"/>
          <el-dialog :visible.sync="deleteGroupFlag" title="删除分组" width="30%" center>
            <p class="el-cont">确定要删除该分组吗？</p>
            <p class="el-cont">分组内的{{ item.videoCounts }}部作品将一同删除</p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deleteGroupFlag = false">取 消</el-button>
              <el-button type="primary" @click="deleteGroup">确 定</el-button>
            </span>
          </el-dialog>
        </el-checkbox-group>
      </p>
      <el-button class="groupButton" type="button" @click="addGroupFlag = true">添加分组</el-button>
      <!-- 添加分组弹出框 -->
      <el-dialog :visible.sync="addGroupFlag" title="添加分组" width="30%" center>
        <el-input v-model="libraryName" placeholder="请输入分组名称" clearable/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addGroupFlag = false">取 消</el-button>
          <el-button type="primary" @click="addGroupInfo">确 定</el-button>
        </span>
      </el-dialog>
    </el-aside>
    <el-main>
      <el-table ref="multipleTable" :data="libraryList" stripe style="width: 100%"  @selection-change="tabSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="groupName" label="分组"/>
        <el-table-column prop="text" label="内容"/>
        <el-table-column prop="times" label="视频长度(s)"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column prop="createUserName" label="创建人"/>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="checkOrUpdate(scope.row,'查看作品内容',1)">查看</el-button>
                <el-button size="mini" @click="checkOrUpdate(scope.row,'修改作品内容',2)" style="margin:0;">修改</el-button>
                <!-- 设备分组弹出层 -->
                <el-dialog :title='form.name' :visible.sync="libraryInfoFlag" center>
                    <el-form ref="form" :model="form">
                  <el-form-item label="所属分组 :">
                    <template>
                        <el-select v-model="groupName" placeholder="请选择" v-bind:disabled="isAble">
                            <el-option v-for="(item,index) in libraryList" :key="index" :label="item.label" :value="item.groupName"></el-option>
                        </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="作品内容 :">
                    <el-input type="textarea" v-model="form.text" id="textheight" v-bind:disabled="isAble"></el-input>
                  </el-form-item>
                  <el-form-item :label="'视频时长 : '+ form.times+'s'">
                    <video :src="form.path" controls autoplay style="margin-top:40px;"></video>
                  </el-form-item>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="libraryInfoFlag = false">取 消</el-button>
                    <el-button type="primary" @click="update">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button size="mini" type="danger" @click="deleteLibrary(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :total="totalcount" />
      </div>
    </el-main>
  </el-container>
  </el-container>
</template>

<script>
import {searchLibrart , contSearch , findGroup , deleteLibrary , deleteGroup , checkInfo , uploadDevice , updateDevice } from '@/api/library'
import {addGroup} from '@/api/device'
export default {
    inject: ['reload'],//引用刷新页面方法
    data(){
      return{
            checkAll: false,
            checkedLibrary: [],
            isIndeterminate: true,
            leftAside:[],//左边分组集合
            deleGroupId:'',//删除左边分组id
            deleteGroupFlag:false,//删除分组显示隐藏
            addGroupFlag: false, // 添加分组显示隐藏的弹框
            libraryName:'',//分组名字
            deleteGroupFlag: false,// 删除分组显示隐藏的弹框
            libraryCont:0,//作品数量
            libraryLimit:10,//作品查询参数
            libraryOffset:0,//作品查询参数
            libraryGroupId:'',//作品查询分组参数
            totalcount:0,//分页默认数量
            libraryList:[],//作品库集合
            libraryId:'',//抖音作品Id
            libraryInfoFlag:false,//查看作品详情
            form:{
                id:null,
                name:"",
                groupId: null,
                path: "",
                text: "",
                times: ""
            },//查看详情的数据集合
            "flagId":'',//禁用标识id
            groupName:'',//设备分组名字
            updateLibraryFlag:false,//上传作品弹窗标识
            uploadList:{//上传作品集合
                groupId:null,//分组id
                multipartFile:"",//文件名字(上传作品时候用)
                text:"",//作品内容
                times:"",//视频长度
                path:"",//视频地址
            },
            isAble:true,//禁用标识,默认禁用
            keyword:'',//搜索内容关键字
            maxTimes:'',//视频最大时长
            minTimes:'',//视频最小时长
      }
    },
    mounted() {
        this.initGroup()
        this.initLibrary()
    },
    methods : {
        // 查询作品库分组信息
        initGroup(){
            findGroup().then(Response =>{
                this.leftAside = Response.data;
            })
        },
        // 获取作品库作品
        initLibrary(){
            searchLibrart(this.libraryGroupId,this.libraryLimit,this.libraryOffset).then(Response =>{
                this.libraryList = Response.data.records;
                this.totalcount = parseInt(Response.data.total);
            })
        },
        // 左边复选框全选事件
        handleCheckAllChange(val){
            this.checkedLibrary = val ? this.leftAside : [];
            this.isIndeterminate = false;
            searchLibrart('', this.libraryLimit, this.libraryOffset).then(Response => {
                this.libraryList = Response.data.records;
                this.libraryCont = this.libraryList.length;
                if(this.checkedLibrary.length > 0){
                    this.$refs.multipleTable.toggleAllSelection(this.tableData);
                }else{
                    this.$refs.multipleTable.clearSelection();
                }
            })
        },
        // 左边复选框单选事件
        handleCheckedCitiesChange(val){
            if(val.length == 1){
                this.libraryGroupId = '';
                for(var i = 0; i < val.length; i ++){
                    this.libraryGroupId = val[i].id;
                }
                searchLibrart(this.libraryGroupId, this.libraryLimit, this.libraryOffset).then(Response => {
                    this.libraryList = Response.data.records;
                    this.$refs.multipleTable.toggleAllSelection(this.tableData);
                })
            }else{
                this.$refs.multipleTable.clearSelection();
            }
        },
        // 添加设备分组信息
        addGroupInfo() {
        if (this.addGroupFlag) {
            addGroup(this.libraryName, 2).then(Response => {
            if (Response.code == 200) {
                findGroup().then(Response => {
                    this.libraryName = '';
                    this.addGroupFlag = false;
                    this.leftAside = Response.data;
                    this.$message.success("操作成功");
                })
            } else {
                console.log(Response.message);
            }
            })
        }
        },
        // 删除左边分组操作
        deleteId(id) {
            this.deleteGroupFlag = true;
            this.deleGroupId = id;
        },
        deleteGroup() {
            deleteGroup(this.deleGroupId).then(Response => {
                if (Response.code == 200) {
                    findGroup().then(Response => {
                        this.deleteGroupFlag = false;
                        this.leftAside = Response.data;
                        this.$message.success("操作成功");
                    })
                } else {
                    console.log(Response.message);
                }
            })
        },
        //表格事件处理
        tabSelect(val){
            this.libraryId = '';
            for(var i = 0; i < val.length; i++){
                this.libraryId = val[i].id;
            }
        },
        // 条件搜索操作
        conditionSerch() {
            contSearch(this.keyword,this.maxTimes,this.minTimes, this.libraryLimit, this.libraryOffset).then(Response =>{
                if(Response.code == 200){
                    this.libraryList = Response.data.records;
                }else{
                    console.log(Response.message);
                }
            })
        },
        // 上传作品处理
        upload(name){
            this.libraryInfoFlag = true;
            this.form.name = name;
        },
        uploadfile() {
            var formdata = new FormData();
            formdata.append('file', this.$refs.uploadRef.files[0]);
            console.log(this.$refs.uploadRef.files[0],formdata)
        },
        checkOrUpdate(row,name,flag){//查看作品详情
            this.libraryInfoFlag = true;
            this.form.name = name;
            this.flagId = flag;
            if(this.flagId == 1){
                this.isAble = true;
            }
            if(this.flagId == 2){
                this.isAble = false;
            }
            checkInfo(row.id).then(Response =>{//查看详情的接口调用
                if(Response.code == 200){
                    this.form.id = Response.data.id;
                    this.form.path = Response.data.path;
                    this.form.text = Response.data.text;
                    this.form.times = Response.data.times;
                    this.form.groupId = Response.data.groupId;
                    this.groupName = Response.data.groupName;
                }else{
                    console.log(Response.message)
                }
            })
        },
        update(){//修改作品操作
            if(this.flagId == 1){
                this.libraryInfoFlag = false;
            }
            if(this.flagId == 2){
                updateDevice(this.form).then(Response =>{
                   if(Response.code == 200){
                        this.$message.success("操作成功");
                        this.libraryInfoFlag = false;
                        this.reload();
                   }else{
                       console.log(Response.message);
                   }
                })
            }
        },
        deleteLibrary(row){//删除作品
            deleteLibrary(row.id).then(Response =>{
                if(Response.code == 200){
                    this.$message.success("操作成功");
                    this.reload();
                }else{
                    console.log(Response.message);
                }
            })
        },
        // 分页操作
        handleCurrentChange(value) {
            this.libraryLimit = (value - 1) * this.libraryLimit;
            searchLibrart(this.libraryGroupId,this.libraryLimit,this.libraryOffset).then(Response => {
                this.libraryList = Response.data.records;
            })
        },

    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.leftTab{
    font-size: 14px;
    border-right: 1px solid #ddd;
    margin-right: 10px;
  }
  .leftTab .group , .el-aside .subGroup{
    padding: 10px 20px ;
    cursor: pointer;
  }
  .leftTab .groupButton{
    margin: 10px 25px;
  }
  .leftTab .subGroup{
    position: relative;
  }
  .deleteButton{
    position: absolute;
    right: 22px;
    background: none;
    top: 0;
    color: #333;
    border: 0;
    display: none;
  }
  .leftTab .subGroup:hover .deleteButton{
    display: block;
  }
  .el-cont{
    text-align:center;
  }
  .searchBtn{
      margin:10px 0;
  }
  .searchBtn .el-input{
      width: 200px;
      float:left;
      margin-right:10px;
  }
  #textheight{
    height:200px !important;
  }
//   上传作品中上传视频按钮的样式
  #uploadfile{
    position: absolute;
    left: 0;
    opacity: 0;
    width: 100%;
    height:100%;
  }
</style>
